<template>
    <div class="menucontent">
        <el-menu
            :default-active="currentpage"
            class="el-menu-vertical-demo"
            background-color="#545c64"
            text-color="#fff"
            active-text-color="#ffd04b">
            <div class="avatarbox">
                <el-image
                style="width: 100px; height: 100px; margin-top: 50px; border-radius:50px"
                :src="userinfo.avatarUrl"></el-image>
                <div>{{userinfo.doctorName}}</div>
            </div>
            <el-menu-item index="1" @click="topath1">
                <i class="el-icon-s-platform" style="font-size: 32px"></i>
                <span slot="title" class="menutitle">问诊管理</span>
            </el-menu-item>
            <el-menu-item index="2" @click="topath2">
                <i class="el-icon-s-order menuicon" style="font-size: 32px"></i>
                <span slot="title" class="menutitle">我的信息</span>
            </el-menu-item>
        </el-menu>        
    </div> 
</template>

<script>
export default {
    props:["currentpage"],
    data(){
        return{
            userinfo:this.GLOBAL.doctorinfo
        }
    },
    mounted(){
    // console.log(this.currentpage)
    },
    methods:{
        topath1(){
            this.$router.push({ path: "/mainpage" });
        },
        topath2(){
            this.$router.push({ path: "/mypage" });
        }
    }
}
</script>

<style scoped>
    .menucontent{
        /* width: 20%; */
        height: 100vh;
        background-color:#545c64;
    }
    .avatarbox{
        height: 250px;
        text-align: center;
        font-size: 20px;
        color:#ffffff
    }
    .menuicon{
        font-size: 100px;
    }
    .menutitle{
        margin-left: 20px;
    }
</style>